<template>
	<!--
	* lotusLoadingData.isShow:设置显示加载中组件
	* -->
    <view v-if="lotusLoadingData.isShow" class="lotus-loading-wrap">
        <view class="lotus-loading-inner">
            <view class="lotus-loading-center">
                <text class="lotus-loading-img"></text>
                <!-- <view class="lotus-loading-text">加载中</view> -->
            </view>
        </view>
    </view>
</template>
<style lang="less">
   .lotus-loading-wrap {
     position: fixed;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 999;
     background: rgba(255, 255, 255, 0);
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .lotus-loading-text {
     color: #fff;
     font-size: 24rpx;
   }
   .lotus-loading-inner {
     width: 146rpx;
     height: 146rpx;
     border-radius: 10rpx;
     text-align: center;
     background: rgba(0, 0, 0, 0.65);
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     /*display: -webkit-box;
     display: -webkit-flex;*/
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .lotus-loading-img {
     display: block;
     background: transparent url() no-repeat;
     background-size: 100%;
     animation: lotusLoading 1s steps(12, end) infinite;
     width: 62rpx;
     height: 62rpx;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 6rpx;
   }
   @-webkit-keyframes lotusLoading {
     0% {
       -webkit-transform: rotate3d(0, 0, 1, 0deg);
       transform: rotate3d(0, 0, 1, 0deg);
     }
     100% {
       -webkit-transform: rotate3d(0, 0, 1, 360deg);
       transform: rotate3d(0, 0, 1, 360deg);
     }
   }
   @keyframes lotusLoading {
     0% {
       -webkit-transform: rotate3d(0, 0, 1, 0deg);
       transform: rotate3d(0, 0, 1, 0deg);
     }
     100% {
       -webkit-transform: rotate3d(0, 0, 1, 360deg);
       transform: rotate3d(0, 0, 1, 360deg);
     }
   }
</style>
<script>
    export default {
        name: 'loading',
        props: ['lotusLoadingData'],
        data () {
            return {
                
            }
        }
    }
</script>